@using BlazorSortableList


@* remove bootstrap borders *@
<style>
    .card {
        box-shadow: none !important;
        border: none !important;
    }

    .card-header {
        box-shadow: none !important;
        border-bottom: none !important;
    }
</style>

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Simple List</h1>
    
    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column is-half">
                    <SortableList Id="simpleList" Items="@items" OnUpdate="@SortList" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.1">
            <div class="columns">
                <div class="column is-half">
                    <SortableList Items="@items" Context="item" DefaultSort>
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code V1.1">
            <pre>@codeContent2</pre>
        </TabPage>
        
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column is-half">
                    <SortableList Id="@ListId" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor1 has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent3</pre>
        </TabPage>
    </TabControl>

</div>

@code {

    private const string ListId = "ExampleListId";

    private string codeContent1 = $@"
    <SortableList Id=""sortable"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
        <SortableItemTemplate>
            <div class=""has-border has-background-white has-cursor-pointer"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        public class Item
        {{
            public int Id {{ get; set; }}
            public string Name {{ get; set; }}
        }}

        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i}}"" }}).ToList();

        private void SortList((int oldIndex, int newIndex) indices)
        {{
            // deconstruct the tuple
            var (oldIndex, newIndex) = indices;

            var items = this.items;
            var itemToMove = items[oldIndex];
            items.RemoveAt(oldIndex);

            if (newIndex < items.Count)
            {{
                items.Insert(newIndex, itemToMove);
            }}
            else
            {{
                items.Add(itemToMove);
            }}

            StateHasChanged();
        }}
    }}";

    private string codeContent2 = @"
     <SortableList Id=""@ListId"" GroupModel=""@_group"" Context=""item"">
       <SortableItemTemplate>
         <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
            <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
         </div>
       </SortableItemTemplate>
    </SortableList>
    @code {{
        public class Item
        {{
            public int Id {{ get; set; }}
            public string Name {{ get; set; }}
        }}
        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

    }}";

    private string codeContent3 = @"
    <SortableList Model=""@model"" Context=""item"">
       <SortableItemTemplate>
         <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
             <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
         </div>
       </SortableItemTemplate>
    </SortableList>
    @code {{
        private const string ListId = ""ExampleListId"";
        public class Item
        {{
            public int Id {{ get; set; }}
            public string Name {{ get; set; }}
        }}
        private List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        private SingleSortableListGroup<Item> _group;

        // Variant with independent items
        // SingleSortableListGroup _group = new SingleSortableListGroup(
        //     ListId,
        //     new SortableListModel(Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList()));

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            _group = new SingleSortableListGroup<Item>(ListId, new SortableListModel<Item>(items));
        }
    }}";

    private List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private SingleSortableListGroup<Item> _group;

    // Variant with independent items
    // SingleSortableListGroup _group = new SingleSortableListGroup(
    //     ListId,
    //     new SortableListModel(Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList()));

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        _group = new SingleSortableListGroup<Item>(ListId, new SortableListModel<Item>(items));
    }

    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }
}
